import React, { useContext, useMemo, useState } from 'react';
import { Input, InputNumber, Select, Space, Switch } from 'antd';
import { ConfigOptions } from './ConfigOptions';
import { LinkSet } from './LinkSet';
import { ConfigsContext } from '../..';
export function ConfigInputProp(props) {
  var _a;
  var propOwner = props.propOwner,
    namepath = props.namepath,
    propName = props.propName,
    propDefaultValue = props.propDefaultValue;
  var forceRender = useContext(ConfigsContext).forceRender;
  var _b = useState(propDefaultValue),
    propCurrentValue = _b[0],
    setPropCurrentValue = _b[1];
  var type = useMemo(function () {
    var _a;
    return (
      ((_a = inputPropsInfo[propName]) === null || _a === void 0 ? void 0 : _a.type) ||
      typeof propDefaultValue
    );
  }, []);
  var options = (_a = inputPropsInfo[propName]) === null || _a === void 0 ? void 0 : _a.options;
  var optionsForSelect = useMemo(function () {
    return options === null || options === void 0
      ? void 0
      : options.map(function (item) {
          return {
            label: item,
            value: item
          };
        });
  }, []);
  var handleChangePropValue = function (newValue) {
    propOwner[propName] = newValue;
    setPropCurrentValue(newValue);
    forceRender();
  };
  switch (type) {
    case 'options':
      return React.createElement(ConfigOptions, { handleChangePropValue: handleChangePropValue });
    case 'boolean':
      return React.createElement(
        Space,
        null,
        React.createElement('strong', null, propName, '\uFF1A'),
        React.createElement(Switch, { checked: propCurrentValue, onChange: handleChangePropValue }),
        React.createElement(LinkSet, { targetType: 'boolean', namepath: namepath })
      );
    case 'string':
      return React.createElement(
        Space,
        null,
        React.createElement('strong', null, propName, '\uFF1A'),
        options
          ? React.createElement(Select, {
              allowClear: true,
              style: { minWidth: 150 },
              defaultValue: propCurrentValue,
              options: optionsForSelect,
              onChange: handleChangePropValue
            })
          : React.createElement(Input, {
              prefix: '"',
              suffix: '"',
              value: propCurrentValue,
              onChange: function (e) {
                return handleChangePropValue(e.target.value);
              }
            })
      );
    case 'number':
      return React.createElement(
        Space,
        null,
        React.createElement('strong', null, propName, '\uFF1A'),
        React.createElement(InputNumber, {
          value: propCurrentValue,
          onChange: handleChangePropValue,
          bordered: false
        }),
        React.createElement(LinkSet, { targetType: 'number', namepath: namepath })
      );
    default:
      return null;
  }
}
export var inputPropsInfo = {
  options: {
    type: 'options'
  },
  maxLength: {
    type: 'number'
  },
  max: {
    type: 'number'
  },
  min: {
    type: 'number'
  },
  decimalSeparator: {
    type: 'string'
  },
  maxTagCount: {
    type: 'number'
  },
  maxTagTextLength: {
    type: 'number'
  },
  mode: {
    type: 'string',
    options: ['multiple', 'tags']
  },
  optionFilterProp: {
    type: 'string',
    options: ['label', 'value']
  },
  popupPlacement: {
    type: 'string',
    options: ['bottomLeft', 'bottomRight', 'topLeft', 'topRight']
  },
  expandTrigger: {
    type: 'string',
    options: ['click', 'hover']
  },
  optionType: {
    type: 'string',
    options: ['default', 'button']
  },
  buttonStyle: {
    type: 'string',
    options: ['outline', 'solid']
  },
  picker: {
    type: 'string',
    options: ['time', 'date', 'week', 'month', 'quarter', 'year']
  },
  listType: {
    type: 'string',
    options: ['text', 'picture', 'picture-card']
  },
  maxCount: {
    type: 'number'
  },
  type: {
    type: 'string',
    options: ['default', 'primary', 'link', 'text', 'ghost', 'dashed']
  },
  htmlType: {
    type: 'string',
    options: ['submit', 'button', 'reset']
  },
  shape: {
    type: 'string',
    options: ['circle', 'round']
  },
  tooltipPlacement: {
    type: 'string',
    options: [
      'topLeft',
      'top',
      'topRight',
      'leftTop',
      'left',
      'leftBottom',
      'rightTop',
      'right',
      'rightBottom',
      'bottomLeft',
      'bottom',
      'bottomRight'
    ]
  }
};
